<template>
  <div class="acc-chart">
    <swak-chart :options="options" :initOptions="initOptions" height="3rem"></swak-chart>
  </div>
</template>

<script>
  import SwakChart from "../../../ui/components/charts/chart";
  import Rem from '@/ui/common/lang/rem';

  export default {
	name: "acc-chart",
	components: {SwakChart},
	data() {
	  return {
		initOptions: {
		  renderer: 'svg'
		}
	  }
	},
	props: {
	  gyro: {
		type: Object,
		default: () => {
		}
	  },
	  shows: {
		type: Object,
		default: () => {
		}
	  }
	},
	computed: {
	  options: function () {
		var legend = [], series = [];
		this.shows.legend.forEach((l) => {
		  if (l.indexOf('加速度') >= 0) {
			legend.push(l)
		  }
		})
		this.shows.series.forEach((l) => {
		  if (l.name.indexOf('加速度') >= 0) {
			series.push(l)
		  }
		})
		return {
		  title: {
			top: Rem.fontSize(18),
			left: Rem.fontSize(5),
			text: (this.gyro.gyroName || '') + ' 加速度 - 数据监控',
			textStyle: {
			  fontSize: Rem.fontSize(18)
			}
		  },
		  grid: {
			top: Rem.fontSize(60) + 'px',
			left: Rem.fontSize(40) + 'px',
			right: Rem.fontSize(20) + 'px',
			bottom: Rem.fontSize(30) + 'px',
		  },
		  animation: false,
		  legend: {
			top: Rem.fontSize(10),
			right: Rem.fontSize(10),
			textStyle: {
			  fontSize: Rem.fontSize(12)
			},
			data: legend
		  },
		  xAxis: {
			type: 'category',
			data: this.shows.data,
			nameTextStyle: {
			  fontSize: Rem.fontSize(12)
			},
			axisLabel: {
			  fontSize: Rem.fontSize(12)
			}
		  },
		  yAxis: {
			type: 'value',
			nameTextStyle: {
			  fontSize: Rem.fontSize(12)
			},
			axisLabel: {
			  fontSize: Rem.fontSize(12)
			}
		  },
		  series: series,
		  textStyle: {
			fontSize: Rem.fontSize(12)
		  }
		}
	  }
	  ,
	}
  }
</script>

<style scoped>

</style>